<template>
    <div class="topic">
        <ul>
            <li v-for="item in dataArr" :key="item.id">
                <img v-lazy="item.scene_pic_url" alt="">
                <p>{{ item.title }}</p>
                <p>{{ item.subtitle }}</p>
                <p class="price">{{ item.price_info | formatMoney }}</p>
            </li>
        </ul>
        <van-pagination v-model="page" :page-count="pageCount" mode="simple" @change="changePage" />
    </div>
</template>
<script>
//引入专题请求接口
import { getTopicData } from '@/utils/http'
export default {
    name: 'Topic',
    data() {
        return {
            size: 5, //默认的每页的数据
            page: 1,// 默认的当前页
            dataArr: [], //页面数据
            pageCount: 0
        }
    },
    components: {
    },
    watch: {},
    methods: {
        changePage() {
            // console.log(this.page); //当前页输出
            //重新请求数据
            this.getData()
        },
        getData() {
            getTopicData({
                page: this.page,
                size: this.size,
            }).then((res) => {
                console.log(res);
                this.dataArr = res.data.data.data
                this.page = res.data.data.currentPage
                this.pageCount = res.data.data.totalPages
            })
        }
    },

    created() {
        //初始化请求数据
        this.getData()
    },
};
</script>
<style scoped lang="less">
.topic {
    img {
        width: 100%;
        display: block;
    }

    p {
        font-size: 16px;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }

    padding-bottom: 60px;
    //修改vant 中的样式 如何修改ui组件设置的样式
    //如果要修改ui组建库样式 一般的话 你的权重不够 达不到修改效果，可以使用深度选择器
    /deep/.van-pagination__page-desc{
        display: none;
    }
}

.price {
    color: brown;
    margin-top: 40px;
}
</style>